<template>
    <div>
        <el-table
                size="small"
                :data="tableData"
                stripe
                border
                style="width: 100%">
            <el-table-column
                    prop="tokenName"
                    width="200"
                    label="币种">
            </el-table-column>
            <el-table-column
                    prop="balance"
                    label="账户余额">
            </el-table-column>
            <el-table-column
                    prop="freezeBalance"
                    label="锁定余额">
            </el-table-column>
            <el-table-column
                    prop="walletAddress"
                    label="钱包地址">
            </el-table-column>
            <el-table-column
                    prop="walletBalance"
                    label="钱包余额">
            </el-table-column>
            <el-table-column
                    width="200"
                    label="操作">
                <template v-slot="scope">
                    <!--                    <el-button type="text" size="small" :disabled="scope.row.tokenName !== 'ETH' && scope.row.tokenName !== 'BTC'" @click="enter(scope.row)">划入</el-button>-->
                    <el-button type="text" size="small" @click="enter(scope.row)">划入</el-button>
                    <el-button type="text" size="small" @click="out(scope.row)">划出</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="划入"
                :visible.sync="enterVisible"
                width="500px">
            <div>
                此操作将划入少量{{ tokenName }}到账户余额，以便完成后续转出，请谨慎操作
            </div>
            <div style="margin-top: 10px;">
                用户当前钱包余额{{currentData.balance}}{{ tokenName }}
            </div>
            <div style="margin-top: 10px;">
                转入数量：
                <el-input style="width: calc(100% - 75px);" placeholder="转入数量" v-model="enterNum">
                </el-input>
            </div>
            <div style="margin-top: 10px;">
                推荐转入0.00023{{ tokenName }}
            </div>
            <div style="margin-top: 10px;color: red;">
                转入数量较多，请检查填写是否正确
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="enterVisible = false">取 消</el-button>
                <el-button type="primary" @click="enterSubmit" :disabled="!Boolean(enterNum)" :loading="loading">提 交</el-button>
            </div>
        </el-dialog>
        <el-dialog
                title="划出"
                :visible.sync="outVisible"
                width="500px">
            <div>
                此操作将当前用户所有可用余额转出到平台账户，以便归集用户资产，此操作不会影响用户的账户余额
            </div>
            <div style="margin-top: 10px;">
                用户当前钱包余额{{currentData.balance}}{{ tokenName }}，预计矿工费0.000036ETH
            </div>
            <div style="margin-top: 10px;color: red;">
                当前ETH不足，无法进行划出操作，请先通过划入操作转入矿工费
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outVisible = false">取 消</el-button>
                <el-button type="primary" @click="outSubmit" :loading="loading">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import { enter, out } from '@/api/users'

  export default {
    name: "tableList",
    props: {
      tableData: Array,
      userId: {
        default: ''
      }
    },
    data () {
      return {
        enterVisible: false,
        outVisible: false,
        currentData: {},
        enterNum: '',
        loading: false
      }
    },
    computed: {
      tokenName () {
        return this.currentData.tokenName || 'BTC'
      }
    },
    methods: {
      enter (row) {
        this.enterNum = ''
        this.currentData = row
        this.enterVisible = true
      },
      out (row) {
        this.currentData = row
        this.outVisible = true
      },
      async enterSubmit () {
        try {
          this.loading = true
          const params = {
            userId: this.userId,
            tokenId: this.currentData.id,
            transferAmount: this.enterNum
          }
          await enter(params)
          this.enterVisible = false
          this.$emit('upload')
          this.$message.success('划入成功')
          this.loading = false
        }catch (e) {
          console.log(e)
          this.loading = false
        }
      },
      async outSubmit () {
        try {
          this.loading = true
          const params = {
            userId: this.userId,
            tokenId: this.currentData.id
          }
          await out(params)
          this.outVisible = false
          this.$emit('upload')
          this.$message.success('划出成功')
          this.loading = false
        }catch (e) {
          console.log(e)
          this.loading = false
        }
      }
    }
  }
</script>

<style scoped>

</style>
